<template>
  <div class="user">
    <Header :left-arrow="true" :isShowTag="isShowTag" title="用户管理" roles="addUser" @search="search"/>
    <form v-show="isShowSearchInput" class="form-tag" action="/">
      <van-search
        v-model="kwds"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel(false)"
      />
    </form>
    <section>
      <van-tabs
        v-model="active"
        color="#009DBD"
        title-active-color="#009DBD"
        animated
        swipeable
        sticky
        @click="toggleRoles">
        <van-tab title="顾客">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <UserList
                v-for="(item, index) in list"
                :item="item"
                :key="index"
                :list="item"
                :is-show-tag="isShowTag"/>
            </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab title="老师">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <UserList
              v-for="(item, index) in 5"
              :item="item"
              :key="index"
              :list="item"
              :is-show-tag="isShowTag"/>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </section>
  </div>
</template>

<script>
import Header from './../../components/Header/LeftArrowHeader'
import UserList from './compones/UserList/UserList'

export default {
  name: 'UserControl',
  components: {
    Header,
    UserList
  },
  data() {
    return {
      list: [], // 列表数据
      active: 0, // tag标签 0 代表顾客，1 代表老师
      isLoading: false, // 下拉刷新状态
      loading: false, // 上拉加载更多
      finished: false,
      error: false,
      refreshing: false,
      kwds: '', // 搜索的关键字
      isShowSearchInput: false, // 控制搜索框显示隐藏 false不显示 true显示
      isShowTag: true // 控制消费余额的显示隐藏
    }
  },
  mounted() {

  },
  methods: {
    /**
     * 控制搜索框显示隐藏
     * @param event
     */
    search(event) {
      this.isShowSearchInput = event
    },
    /**
     * input搜索框的搜索回调
     * @param val
     */
    onSearch(val) {
      console.log(val)
      this.Toast(val)
    },
    /**
     * input搜索框的取消回调
     */
    onCancel(event) {
      this.isShowSearchInput = event
    },
    /**
     * 切换顾客/教师列表的回调
     * @param name
     * name: 0/顾客 1/老师
     */
    toggleRoles(name) {
      if (name === 0) {
        this.isShowTag = true
      } else {
        this.isShowTag = false
      }
    },
    /**
     * 异步请求数据
     */
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = []
          this.refreshing = false
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1)
        }
        this.loading = false

        if (this.list.length >= 40) {
          this.finished = true
        }
      }, 1000)
    },
    /**
     * 下拉刷新
     */
    onRefresh() {
      setTimeout(() => {
        this.Toast('刷新成功')
        // 清空列表数据
        this.finished = false
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true
        this.onLoad()
        this.isLoading = false
        this.refreshing = true
      }, 1000)
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">
.user {
  .form-tag {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
}
</style>
